<template>
  <div>
    <slot>
      <el-input v-model="initDisplayData" :readonly="true" :disabled="true" class="tl-ref-selector" :class="{ disabled: disabled }" v-if="isDisplayDefaultElement">
        <el-button slot="append" icon="el-icon-search" @click="openRefDialog" :disabled="disabled"></el-button>
      </el-input>
    </slot>
    <el-dialog :visible.sync="refVisible" ref="refDailog" :title="refTitle" v-dialogDrag width="1100px" top="10px" :modal-append-to-body="false" :append-to-body="true" class="tl-ref tl-dialog tl-ref-boardroom-item" @open="open">
      <el-row>
        <el-col :span="6">
          <h4>预约要求</h4>
          <el-form ref="form" class="board-item-filter" :model="requireModel" size="small" label-width="68px" style="padding-right:17px;">
            <el-form-item label="开始时间" prop="begintime">
              <el-date-picker v-model="requireModel.begintime" type="datetime" placeholder="预计开始时间" default-time="09:00:00" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endtime">
              <el-date-picker v-model="requireModel.endtime" type="datetime" placeholder="预计结束时间" default-time="09:00:00" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
            </el-form-item>
            <el-form-item label="参会人数" prop="count">
              <el-input v-model="requireModel.count" />
            </el-form-item>
            <!-- <el-form-item label="配套资源" prop="sourcelist">
              <el-checkbox-group v-model="requireModel.sourcelist">
                <el-checkbox v-for="item in allSourceList" :key="item.id" :label="item.id.toString()">
                  <span :class="{ red: item.state !== 1 }">{{ item.state !== 1 ? item.name + "(缺货)" : item.name }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item> -->
          </el-form>
        </el-col>
        <el-col :span="18">
          <el-row v-loading="isLoading">
            <el-col :span="8" v-for="item in filterItem" :key="item.id">
              <el-card class="box-card-boardroom-item" shadow="hover">
                <div slot="header" class="clearfix">
                  <div class="boardroom-title ellipsis" :title="item.name + '(' + item.displocation + ')'">{{ item.name + "(" + item.displocation + ")" }}</div>
                  <div class="control">
                    <el-button type="text" @click="confirm(item)">选择</el-button>
                    <el-tag :type="item.state === 1 ? 'success' : 'danger'" size="mini">{{ item.description }}</el-tag>
                  </div>
                </div>
                <div class="ellipsis"><i>可承载人数：</i>{{ item.capacity }} 人，<i>面积：</i>{{ item.square }} 平米</div>
                <div class="ellipsis" :title="item.telephone"><i>负责人：</i>{{ item.username + "(" + item.usercode + ")" }} - {{ item.telephone }}</div>
                <div class="ellipsis" :title="item.dispsourcelist"><i>会议室资源：</i>{{ item.dispsourcelist }}</div>
                <div class="ellipsis" :title="item.performance"><i>会议室性能：</i>{{ item.performance }}</div>
                <div>
                  <i>近期预约记录：</i>
                  <el-popover placement="top" width="330" trigger="hover" :disabled="!item.applylist || item.applylist.length === 0">
                    <ul class="text item">
                      <li v-for="apply in item.applylist" :key="apply.id">
                        <p>{{ apply.begintime | toDateTime("yyyy-MM-dd HH:mm") }} - {{ apply.endtime | toDateTime("yyyy-MM-dd HH:mm") }}</p>
                        <i>会议名称：</i>{{ apply.name }} <br /><i>申请人：</i>{{ apply.username }} ，<i>联系电话：</i>{{ apply.telephone }}
                      </li>
                    </ul>
                    <div slot="reference" class="order-count">{{ item.applylist ? item.applylist.length : 0 }} <svg-icon icon-class="search" v-if="item.applylist" /></div>
                  </el-popover>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { putAction, getAction, postAction } from "@tapui/utils/http"
export default {
  data() {
    return {
      refVisible: false,
      dataList: [],
      isLoading: false,
      url: {
        queryDataUrl: "toa/boardroomItem/queryBoardroomWithApply",
        queryBoardroomSourceList: "/toa/boardroomSource/list"
      },
      // 会议室资源可选列表
      allSourceList: [],
      displayData: ""
    }
  },
  props: {
    requireModel: {
      default: function() {
        return {
          begintime: "",
          endtime: "",
          count: 0,
          sourcelist: []
        }
      },
      type: Object
    },
    singleSelect: {
      default: true,
      type: Boolean
    },
    dataType: {
      default: "id",
      type: String
    },
    value: {
      default: "",
      type: [String, Number]
    },
    initDisplayData: {
      default: "",
      type: String
    },
    isDisplayDefaultElement: {
      default: true,
      type: Boolean
    },
    refTitle: {
      default: "选择会议室",
      type: String
    },
    disabled: {
      default: false,
      type: Boolean
    }
  },
  computed: {
    filterItem() {
      for (let item of this.dataList) {
        item.state = 1 // 1为正常
        item.description = "可选"
        if (this.requireModel.count && item.capacity < this.requireModel.count) {
          item.state = 0 // 0为警告
          item.description = "人数超限"
          continue
        }
        if (item.applylist && item.applylist.length > 0) {
          for (let apply of item.applylist) {
            if (apply.begintime && apply.endtime) {
              if (this.requireModel.begintime < apply.endtime && this.requireModel.endtime > apply.begintime) {
                item.state = -1 // -1为不可选择
                item.description = "时间冲突"
                continue
              } else if (this.requireModel.begintime > apply.begintime && this.requireModel.begintime < apply.endtime) {
                item.state = -1 // -1为不可选择
                item.description = "时间冲突"
                continue
              } else if (this.requireModel.endtime > apply.begintime && this.requireModel.endtime < apply.endtime) {
                item.state = -1 // -1为不可选择
                item.description = "时间冲突"
                continue
              }
            }
          }
        }
        // if (this.requireModel.sourcelist) {
        //   let sourceStr = item.sourcelist + ","
        //   for (let source of this.requireModel.sourcelist) {
        //     if (sourceStr.indexOf(source + ",") === -1) {
        //       item.state = 0 // 0为警告
        //       item.description = "资源不足"
        //       continue
        //     }
        //   }
        // }
      }
      return this.dataList
    }
  },
  methods: {
    doCancelEdit() {
      this.refVisible = false
    },
    confirm(item) {
      if (item.state === -1) {
        this.$alert("该会议室" + item.description + "，不可选择", "错误", {
          dangerouslyUseHTMLString: true,
          type: "error"
        })
        return
      }
      if (item.state === 0) {
        this.$confirm("该会议室" + item.description + ", 是否要选择?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.doConfirm(item)
          })
          .catch(() => {})
      } else {
        this.doConfirm(item)
      }
    },
    doConfirm(item) {
      this.displayData = ""
      let returnData = ""
      returnData = item[this.dataType]
      this.displayData = item.name + "(" + item.displocation + ")"
      this.$emit("update:initDisplayData", this.displayData)
      this.$emit("update:requireModel", this.requireModel)
      this.$emit("input", returnData)
      this.$emit("confirm", item)
      this.$emit("updateRequire", this.requireModel)
      this.refVisible = false
    },
    openRefDialog() {
      if (this.disabled) {
        return
      }
      this.$emit("open")
      this.refVisible = true
    },
    queryData() {
      this.isLoading = true
      getAction(this.url.queryDataUrl)
        .then(res => {
          if (res.success) {
            this.dataList = res.result
          } else {
            this.$message.warning(res.message)
          }
          this.isLoading = false
        })
        .catch(err => {
          this.isLoading = false
        })
    },
    open() {
      this.queryData()
      getAction(this.url.queryBoardroomSourceList, {
        sidx: "sortcode",
        sord: "asc",
        currentPage: 1,
        pageSize: 9999,
        qry_enabled: 1
      }).then(data => {
        if (data.success) {
          this.allSourceList = data.result.dataList
        }
      })
    }
  },
  created() {}
}
</script>
<style lang="scss">
.tl-ref-boardroom-item {
  .el-dialog__body {
    padding: 15px;
    h4 {
      margin: 0 0 10px 0;
    }
  }
}
.board-item-filter {
  .el-date-editor.el-input {
    width: 190px;
  }
}
.box-card-boardroom-item {
  margin: 5px;
  .el-card__header,
  .el-card__body {
    padding: 10px;
    position: relative;
    & > div {
      line-height: 22px;
    }
    i {
      font-style: normal;
      color: #999;
    }
    .boardroom-title {
      margin-right: 90px;
    }
    .control {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
  .el-card__header {
    font-size: 13px;
    .el-tag {
      float: right;
      margin-right: 5px;
      margin-top: 1px;
    }
    .el-button {
      float: right;
      padding: 3px 0;
    }
  }
}
.red {
  color: red;
}
.el-popover {
  i {
    font-style: normal;
    color: #999;
  }
  .text {
    padding: 0;
    margin: 0;
    overflow: hidden;
    li {
      list-style: none;
      padding: 0;
      margin: 0;
      border-bottom: 1px dashed #ccc;
      padding-bottom: 5px;
      margin-bottom: 5px;
      p {
        margin: 0;
      }
    }
  }
}
.order-count {
  display: inline-block;
  font-weight: bold;
}
</style>
